<template>
  <div
    :type="buttonTypes.includes(type) ? type : 'default'"
    :class="[{ 'popconfirm': popconfirm }, { 'alert': alert }, { 'disabled': disabled }, `btn btn-${type} btn-${size}`, { 'btn-hollow': hollow }]"
    @click="handleClick"
  >
    <slot></slot>
    <div v-if="tip" class="tip-text" :class="{ 'disabled': disabled }">（{{ tipText }}）</div>
  </div>
</template>

<script lang="ts">
import { PropType, defineComponent } from 'vue'
import { debounce } from '@/utils/lodashChunk'

const buttonTypes = ['default', 'primary']

export default defineComponent({
  name: 'SButton',
  props: {
    tip: {
      type: Boolean, // 是否展示tips
      default: false
    },
    tipText: {
      type: String,
      default: '仅一人点击编辑'
    },
    hollow: {
      type: Boolean, // 无背景色圆角，镂空样式
      default: false
    },
    type: {
      type: String,
      default: 'default'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'medium'
    },
    popconfirm: {
      type: Boolean,
    },
    alert: {
      type: Boolean
    }
  },
  emits: ['click'],

  setup(props, { emit }) {
    const handleClick = debounce(() => {
      if (!props.disabled) {
        emit("click");
      }
    }, 200);
    return {
      handleClick,
      buttonTypes,
    }
  }
})
</script>

<style lang="scss" scoped>
@import "./styles/shop-button";
</style>
